<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/main/css/main.css}">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 主要内容 -->
<div class="container">
    <div class="col-sm-12" style="margin-top: 50px">
        <button style="margin-top: 10px" class="btn btn-success" th:text="'共查询到'+${foods.size()}+'条结果'"
        th:class="${foods.size()==0?'btn btn-danger':'btn btn-success'}"></button>
        <ul style="margin-top: 20px" class="nav nav-pills nav-stacked">
            <li class="media" th:each="food:${foods}">
                <div class="media-left">
                    <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}"><img height="180" width="200" th:src="${food.image}"></a>
                </div>
                <div class="media-body">
                    <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}"><h4 class="media-heading" th:text="${food.title}"></h4></a>
                    <p th:text="${food.detail}"></p>
                </div>
                <br/>
            </li>
        </ul>
    </div>
</div>
<!-- 底部 -->
<div th:if="${foods.size()} lt 1" style="margin-top: 455px">
    <div th:replace="common/m_bottom::m_bottom"></div>
</div>
<div th:if="${foods.size()} eq 1" style="margin-top: 255px">
    <div th:replace="common/m_bottom::m_bottom"></div>
</div>
<div th:if="${foods.size()} gt 1" style="margin-top: 53px">
    <div th:replace="common/m_bottom::m_bottom"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>